<script type="text/javascript" charset="utf-8" src="/public/static//ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/public/static//ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="/public/static//ueditor/lang/zh-cn/zh-cn.js"></script>
<style>
    select.form-control{width: auto}
    .none{display: none}
    input[type=checkbox], input[type=radio]{opacity:1;position: relative;left: 0;width: 14px;height: 14px;float: left;line-height: 18px}
    .form-horizontal .has-feedback .form-control-feedback{right: -37px}
</style>
<style>

</style>

<div class="ajax_content">
    <div class="widget-body">
        <form id="AppForm" action="" method="post" class="form-horizontal" data-bv-message="" data-bv-feedbackicons-valid="glyphicon glyphicon-ok" data-bv-feedbackicons-invalid="glyphicon glyphicon-remove" data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
            {if $typeList}
            <div class="form-title">
                {foreach name="typeList" item="v"}
                <a href="{$v.url}"  class="btn {if $v['id'] eq $type_id}btn-info{/if}" data-loader="App-loader" data-loadername="{$v.name}">
                    <i></i>{$v.name}
                </a>&nbsp;&nbsp;&nbsp;
                {/foreach}
            </div>
            {/if}
            <input type="hidden" name="id" value="{$data['id']}" />
            {volist name="form" id="f"}
            <?php if(in_array($f['type'],['text','password','textarea'])){ ?>
            <div class="form-group form-group-{$f.key} {if $f['depend']} none {/if}">
                <label class="col-lg-3 control-label">{$f.name}{if $f['required']}<sup>*</sup>{/if}</label>
                <div class="col-lg-6">
                    {if $f['type']=='textarea'}
                    <textarea style="width: 360px" {if $f['row']}rows={$f['row']}{else/} rows="3" {/if} class="form-control" id="{$f.key}" name="{$f.key}" {if $f['required']}placeholder="必填" required data-bv-notempty="true" data-bv-notempty-message="不能为空"{/if} ">{$data[$f['key']]}</textarea>
                    {else/}
                    <input type="{$f['type']}" class="form-control" id="{$f.key}" name="{$f.key}" {if $f['required']}placeholder="必填" required data-bv-notempty="true" data-bv-notempty-message="不能为空"{/if}  value="{$data[$f['key']]}">
                    {/if}

                </div>
            </div>
            <?php }?>

            <?php if($f['type']=='content'){ ?><!--富文本框-->
            <div class="form-group form-group-{$f.key} {if $f['depend']} none {/if}">
                <label class="col-lg-3 control-label">{$f.name}{if $f['required']}<sup>*</sup>{/if}</label>
                <div class="col-lg-6">
                    <!--  i<nput type="text" class="form-control" name="user_pact" placeholder="必填"
                            value="{$cache.user_pact}"> -->
                    <!-- <textarea name="shop_pact" id="" cols="30" rows="10" style="width:518px;">{$cache.shop_pact}</textarea> -->
                    <input type="hidden">
                    <textarea id="J-ueditor"  type="text/plain" style="width:600px;height:380px;" name="{$f.key}">{$data[$f['key']]|htmlspecialchars_decode}</textarea>
                    <!--<script type="text/plain" id="J-ueditor" name="{$f.key}">-->
                    <!--{$data[$f['key']]|htmlspecialchars_decode}-->
                    <!--</script>-->
                </div>
            </div>
            <?php }?>
            <?php if($f['type']=='select'){ ?><!--下拉框-->
            <div class="form-group form-group-{$f.key} {if $f['depend']} none {/if}">
                <label class="col-lg-3 control-label">{$f.name}{if $f['required']}<sup>*</sup>{/if}</label>
                {if $f['linkage']}
                <div class="col-lg-6" id="linkage_{$f.key}" data-num="{$f['linkage']|count}">
                    <?php $kk=0;?>
                    {volist name="f['linkage']" id="lk" }
                    <?php $kk++; ?>
                    <div style="float: left;margin-right: 15px">
                        <select class="form-control" id="{$key}" name="{$key}" {if $f['required']}required="required" {/if}  style="padding-right: 15px;" data-id="{$data[$key]}" data-name="{$lk}">
                            <option value="" >{$lk}</option>
                            {if $kk==1}
                            {volist name="f['data']" id="vo" }
                            <option value="{$key}" {if $data[$f['key']] eq $key}selected{/if}>{$vo}</option>
                            {/volist}
                            {/if}
                        </select>
                    </div>
                    {/volist}
                </div>
                {else}
                <div class="col-lg-5">
                    <select class="form-control" id="{$f.key}" name="{$f.key}" {if $f['required']}required="required"{/if}  >
                    <option value="" >请选择</option>
                    {volist name="f['data']" id="vo" }
                    <option value="{$key}" {if $data[$f['key']] eq $key}selected{/if}>{$vo}</option>
                    {/volist}
                    </select>
                </div>
                {/if}


            </div>
            <?php }?>
            <?php if($f['type']=='radio'){ ?><!--单选框-->
            <div class="form-group form-group-{$f.key} {if $f['depend']} none {/if}">
                <label class="col-lg-3 control-label">{$f.name}{if $f['required']}<sup>*</sup>{/if}</label>
                <div class="col-lg-2 radioList">
                    {volist name="f['data']" id="vo" }
                    <label>  <input type="radio" name="{$f.key}" value="{$key}" {if $data[$f['key']] eq $key }checked="checked"{/if} />&nbsp;<span>{$vo}</span></label>&nbsp;&nbsp;&nbsp;
                    {/volist}
                </div>
            </div>
            <?php }?>
            <?php if($f['type']=='multiple'){ ?><!--多选框-->
            <div class="form-group form-group-{$f.key} {if $f['depend']} none {/if}">
                <label class="col-lg-3 control-label">{$f.name}{if $f['required']}<sup>*</sup>{/if}<br>(按住Ctrl键可多选)</label>
                <div class="col-lg-6">
                    <select name="{$f.key}[]" class="form-control" multiple="multiple" size="8" {if $f['required']} required{/if}>
                        {volist name="f['data']" id="vo"}
                        <option value="{$key}" {if in_array($key,explode(',',$data[$f['key']]))  }selected{/if}>{$vo}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <?php }?>
            <?php if($f['type']=='image'){ ?><!--图片-->
            <div class="form-group form-group-{$f.key} {if $f['depend']} none {/if} ">
                <label class="col-lg-3 control-label">{$f.name}{if $f['required']}<sup>*</sup>{/if}</label>
                <div class="col-lg-6">
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control"  name="{$f.key}" value="{$data[$f['key']]}" id="App-pic" {if $f['required']}placeholder="必填" required data-bv-notempty="true" data-bv-notempty-message="不能为空"{/if}>
                        <span class="input-group-btn">
                                    <button class="btn btn-default shiny" type="button" onclick="appImgviewer('App-pic',1)">
                                        <i class="fa fa-camera-retro"></i>预览</button>
                                    <button class="btn btn-default shiny" type="button" onclick="appImguploader_one('App-pic',{$f.more})">
                                        <i class="glyphicon glyphicon-picture"></i>上传</button>
                                </span>
                    </div>
                </div>
            </div>
            <?php }?>

            <?php if($f['type']=='map'){ ?><!--地图-->
            <div class="form-group form-group-{$f.key} {if $f['depend']} none{/if}">
                <label class="col-lg-3 control-label">{$f.name}</label>
                <div class="col-lg-6">
                    <div class="input-group input-group-sm">
                        <input id="App-shop_address" name="{$f.key}" type="text" class="form-control" id="{$f.key}" value="{$data[$f['key']]}" {if $f['required']}placeholder="必填" required data-bv-notempty="true" data-bv-notempty-message="不能为空"{/if} >
                        <span class="input-group-btn">
                                  <button class="btn btn-default shiny" type="button" onclick="baiduDitu('App-shop_address','App-lng','App-lat')"><i class="glyphicon glyphicon-picture"></i>地图</button>
                              </span>
                    </div>
                </div>
            </div>
            <div class="form-group form-group-{$f.key} {if $f['depend']} none {/if}">
                <label class="col-lg-3 control-label"></label>
                <div class="col-lg-2">
                    <div class="input-group input-group-xs">
                                    <span class="input-group-btn">
                                        <button class="btn btn-palegreen" type="button">坐标：Lng</button>
                                    </span>
                        <input id="App-lng" name="lng" type="text" class="form-control" id="{$f.key}" value="{$data.lng}">
                    </div>
                </div>
                <div class="col-lg-2">
                    <div class="input-group input-group-xs">
                                    <span class="input-group-btn">
                                        <button class="btn btn-palegreen" type="button">坐标：Lat</button>
                                    </span>
                        <input id="App-lat" name="lat" type="text" class="form-control" id="{$f.key}" value="{$data.lat}">
                    </div>
                </div>
            </div>
            <?php }?>
            <?php if($f['type']=='time'){ ?><!--时间-->
            <div class="form-group form-group-{$f.key} {if $f['depend']} none{/if}">
                <label class="col-lg-2 control-label">{$f.name}{if $f['required']}<sup>*</sup>{/if}</label>
                <div class="col-lg-6">
                    <input name="{$f.key}" type="text" {if $f['required']}required="required"{/if} class="form-control input-sm" onfocus="this.blur()" onclick="timeWidgets(this)" placeholder="请选择日期"
                           {if condition="$data[$f['key']]"} value="{$data[$f['key']]|date='Y-m-d ',###}"  {/if}
                    data-bv-notempty="true" data-bv-notempty-message="不能为空" class="form_datetime" >
                </div>
            </div>
            <?php }?>

            {/volist}
            <div class="form-group form-group-save">
                <div class="col-lg-offset-2 col-lg-6">
                    <button class="btn btn-primary btn-lg" type="submit">保存</button>
                </div>
            </div>
        </form>
    </div>

</div>

<script>
    $('#AppForm').bootstrapValidator({
        submitHandler: function (validator, form, submitButton) {
            var tourl = "{$thisUrl}";
            var data = $('#AppForm').serialize();
            var funok=function(){
                var callok=function(){
                    //关闭并刷新
                    $('.bootbox-close-button').trigger('click');
                    $('.glyphicon-refresh').trigger('click');

                    return false;
                };
                var callerr=function(){
                    //拦截错误
                    return false;
                };
                $.App.ajax('post',tourl,data,callok,callerr);
            }
            funok();


            return false;
        }});

    var kk = $("#J-ueditor").attr("name");
    if(kk){
        var ue = UE.getEditor('J-ueditor', {
            textarea: kk //提交字段名，必须填写，数据库必须有此字段
        });
    }

    $(document).ready(function(){
        // 在这里写你的代码...
        // 3级联动的代码//如果有三级联动
        // console.log(1)
        function select_ajax(url,data_id,id) {
            $.get(url, function(res){
                // console.log(url)
                html = '<option value='+data_id+'>'+res.data+'</option>';
                $("#"+id).html(html)
            })
        }
        //1.模糊获取linkage_xxx 的id
        //2.循环这个对象
        //3.把linkage_xxx 复制到一个变量，下面代码都使用这个变量
        var linkage_id_key = new Array()
        var obj_data = $("div[id^='linkage']");
        for (var i in obj_data) {
            if(obj_data[i]['id']){
                var linkage_key = obj_data[i]['id'];
                linkage_id_key[i] = "#"+linkage_key;
            }

        }

        linkage_id_key.forEach((item,index,array)=>{
            if ($(item).text()){
                var num = $(item).attr("data-num");
                // console.log(num)
                if (num>1){
                    // 更新对应的
                    $select = $(item+' select');
                    // console.log($select)
                    var i;
                    for (i = 0; i < num; i++) {
                        // 匹配对应的值
                        if (i>0){
                            var data_id = $select[i].dataset.id;
                            if(data_id>0){
                                var name = $select[i].id
                                var url = "/dlc/{$className}/"+name+'/id/'+data_id;
                                select_ajax(url,data_id,name)
                            }
                        }
                    }
                    $(item+" select").change( function() {
                        var list = $(item+" select");
                        var num = $(this).index(item+" select")
                        // 1.请求地址
                        var name = $(this).attr("id");
                        var data_id = $('#'+name+' option:selected').val();
                        url = "/dlc/{$className}/"+name+'/pid/'+data_id;
                        console.log(list[num+1]);
                        if( typeof(list[num+1]) != "undefined"){
                            $.get(url, function(res){
                                // console.log(res.data)
                                $id = list[num+1].id;
                                html =  '<option value="">'+$("#"+$id).attr("data-name")+'</option>';
                                var arr = res.data;
                                for (var index in arr){
                                    html +=  '<option value='+index+'>'+arr[index]+'</option>';
                                }
                                $("#"+$id).html(html)
                                // console.log(html)
                                // list[num+1].html(html)
                            })
                        }
                    });
                }
            }
            //执行代码
        })



    });


    $('#AppForm').bootstrapValidator({
        submitHandler: function (validator, form, submitButton) {
            var tourl = "{:url($selfUrl)}";
            var data = $('#AppForm').serialize();
            $.App.ajax('post', tourl, data, function () {
                $('#refresh-back').trigger('click');
            });

            return false;
        }});

    // 时间控件
    function timeWidgets(obj) {
        $(obj).datetimepicker({
            format: "yyyy-mm-dd",
            language: "zh-CN",
            autoclose: true,
            minView: "month",
            startDate: "2019-01-01 00:00",
        }).on('changeDate',function () {

        });
    }
    // 依赖输入框或者下拉框
    var list = {$form};
    var list = JSON.parse('{$form|@json_encode}');
    function formIni() {
        $.each(list,function(k,v){
            if (v['depend']) {
                $(".form-group-"+k).addClass("none");
                $(".form-group-"+k+" input").attr("disabled", true);
                depend = v['depend'];
                className = v['depend'][0];
                value = $("#"+className).val();
                if (depend[1]=='>'){
                    if (value > depend[2]){
                        repeat(k)
                    }
                }
                if (depend[1]=='>='){
                    if (value >= depend[2]){
                        repeat(k)
                    }
                }
                if (depend[1]=='='){
                    if (value == depend[2]){
                        repeat(k)
                    }

                }
                if (depend[1]=='<'){
                    if (value < depend[2]){
                        repeat(k)
                    }

                }
                if (depend[1]=='<='){
                    if (value <= depend[2]){
                        repeat(k)
                    }

                }
                if (depend[1]=='!='){
                    if (value != depend[2]){
                        repeat(k)
                    }
                }
            }
        })
    }
    function repeat(k) {
        $(".form-group-"+k).removeClass("none");
        $(".form-group-"+k+" input").attr("disabled", false);

    }
    function pageStart() {
        formIni();
        $.each(list,function(k,v){
            if (v['depend']) {
                className = v['depend'][0];
                //获取数组
                $("#"+className).change( function() {
                    formIni();
                });
            }
        })
    }
    pageStart();
</script>